<template>
    <div class="announcement">
        <div class="main">
            <el-card shadow="always" class="Card">
                <div class="cardtitle">发布公告</div>
                <div class="cardtext">上传小程序首页公告以及相关图片</div>
            </el-card>
            <el-card shadow="always" class="Card">
                <div class="upload">
                    <div class="titleWrap">
                        <div class="cardtext">标题</div>
                        <el-input v-model.lazy="title" placeholder="请输入公告标题内容" />
                    </div>
                    <div class="titleWrap">
                        <div class="cardtext">公告内容</div>
                          <el-input
                                v-model.lazy="content"
                                :rows="3"
                                type="textarea"
                                placeholder="请编辑公告文章内容"
                            />
                    </div>
                    <div class="uploadWrap">
                        <div class="uploadtext">封面上传</div>
                        <el-upload
                            ref="pictureLoad"
                            list-type="picture-card"
                            accept=".jpg,.jpeg,.png,.gif"
                            :auto-upload="false"
                            :file-list="pictureList"
                        >
                            <el-icon><Plus /></el-icon>
                            <template #tip>
                            <div class="el-upload__tip">
                              格式为：.jpg,.jpeg,.png,.gif
                            </div>
                            </template>
                        </el-upload>
<!--                        <el-dialog v-model="dialogVisible">-->
<!--                            <img w-full :src="dialogImageUrl" alt="Preview Image" />-->
<!--                        </el-dialog>-->
                        <div class="uploadtext">附件上传</div>
                        <el-upload
                            ref="fileLoad"
                            list-type="picture-card"
                            accept=".xlsx,.docx"
                            :auto-upload="false"
                            :file-list="fileList"
                        >
                            <el-icon><Plus /></el-icon>
                            <template #tip>
                            <div class="el-upload__tip">
                                格式：.xlsx .docx
                            </div>
                            </template>
                        </el-upload>
<!--                        <el-dialog v-model="dialogVisible">-->
<!--                            <img w-full :src="dialogImageUrl" alt="Preview Image" />-->
<!--                        </el-dialog>-->
                    </div>
                    <div class="buttonWrap">
                        <el-button type="primary" @click="submit">提交</el-button>
                        <el-button @click="reset">重置</el-button>
                    </div>
                </div>
            </el-card>
        </div>
    </div>
</template>

<script>
import {send} from "@/network/send";
import {messageElMessage} from "@/utils/tips";

export default {
      data() {
        return {
          fileList: [],  //  放置附件文件
          pictureList: [],  //  放置图片
          title: null,  //  公告标题
          content: null,  //  公告内容
    }
  },
  methods: {
    submit() {
      // 公告标题/内容为空
      if (!this.title || !this.content) {
        messageElMessage("请填写公告标题和公告内容！", 'warning')
        return
      }
      // 将数据加载为FormData格式
      let uploadData = new FormData()
      this.fileList.forEach(file => {
        uploadData.append('file', file.raw, file.raw.name)
      })
      this.pictureList.forEach(picture => {
        uploadData.append('picture', picture.raw, picture.raw.name)
      })
      uploadData.append('title', this.title)
      uploadData.append('content', this.content)
      uploadData.append('type', 1)
      // 传输数据
      send(uploadData)
          .then(res => {
            // 上传失败
            if (res.data.status !== 1) {
              messageElMessage(res.data.message, 'error')
              return
            }
            // 置空准备上传的文件
            this.fileList = []
            this.pictureList = []
            this.$refs.pictureLoad.clearFiles()
            this.$refs.fileLoad.clearFiles()
            // 上传成功
            messageElMessage(res.data.message, 'success')
          })
          .catch(() => {
            messageElMessage('上传数据失败', 'error')
          })
    },
    // 重置
    reset() {
      this.fileList =  []
      this.pictureList =  []
      this.$refs.pictureLoad.clearFiles()
      this.$refs.fileLoad.clearFiles()
      this.title = null
      this.content = null
    }
  }
}
</script>

<style scoped>
.announcement{
  position: absolute;
  left: 12%;
  top: 6%;
  width: 88%;
  height: 94%;
  background-color: rgb(245, 245, 245);
}
.main{
  padding: 15px;
  display: flex;
  flex-direction: column;
}
.Card{
  margin: 20px;
  width: 95%;
  display: flex;
  align-items: center;
}
.cardtitle{
  width: 70px;
  margin: 10px;
}
.cardtext{
  width: 235px;
  font-size: 14px;
  color: rgb(125, 125, 125);
}
.uploadtext{
    height: 200px;
    width:100px;
    font-size: 14px;
    color: rgb(125, 125, 125);
}
.upload{
    display: flex;
    align-items: center;
    flex-direction: column;
}
.titleWrap{
    margin: 20px;
    display: flex;
    align-items: center;
}
.uploadWrap{
    display: flex;
    align-items: center;
    margin: 20px;
}
.buttonWrap{
    margin: 20px;
}
</style>